<template>
  <div>
    <div>
      <span>来自于: </span>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="city">
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
      <!-- 下拉菜单要绑定在select上 -->
      <select v-model="city1" multiple>
        <option value="北京市">北京</option>
        <option value="南京市">南京</option>
        <option value="天津市">天津</option>
      </select>
    </div>
    <div>
      <!-- (重要)
      遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性
       -->
      <span>爱好: </span>
      <input type="checkbox" value="抽烟" v-model="hobby" />上班
      <input type="checkbox" value="喝酒" v-model="hobby" />上班
      <input type="checkbox" value="写代码" v-model="hobby" />要饭
    </div>
    <div>
      <span>性别: </span>
      <input type="radio" value="男" name="sex" v-model="sex" />男
      <input type="radio" value="女" name="sex" v-model="sex" />女
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="info"> </textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: "",
      city1: [""],
      // hobby:'',
      // 设置默认选则项
      hobby: ["抽烟"],
      sex: "男",
      info: "www",
    }
  },
}
</script>
